<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据分析 - TodoList</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="miniprogram-container">
        <div class="page">
            <!-- 头部导航 -->
            <header class="header">
                <div class="flex flex-between">
                    <div class="flex" style="gap: 12px;">
                        <button class="btn btn-secondary" onclick="goBack()">
                            <i class="fas fa-arrow-left"></i>
                        </button>
                        <div>
                            <h1 class="header-title">📊 数据分析</h1>
                            <p class="header-subtitle">ANALYTICS DASHBOARD</p>
                        </div>
                    </div>
                    <div class="flex" style="gap: 8px;">
                        <button class="btn btn-secondary" onclick="refreshData()">
                            <i class="fas fa-sync"></i>
                        </button>
                        <button class="btn btn-secondary" onclick="exportReport()">
                            <i class="fas fa-download"></i>
                        </button>
                    </div>
                </div>
            </header>

            <!-- 内容区域 -->
            <div class="flex-1" style="overflow-y: auto; padding-bottom: 100px;">
                
                <!-- 时间范围选择 -->
                <div class="card animate-slide-up">
                    <div class="flex flex-between" style="margin-bottom: 16px;">
                        <h4 style="margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px;">⏰ 时间范围</h4>
                        <span class="priority-badge priority-low" style="font-size: 10px;">LIVE</span>
                    </div>
                    <div class="flex" style="gap: 8px; flex-wrap: wrap;">
                        <button class="btn btn-primary time-btn active" data-range="7">最近7天</button>
                        <button class="btn btn-secondary time-btn" data-range="30">最近30天</button>
                        <button class="btn btn-secondary time-btn" data-range="90">最近3个月</button>
                        <button class="btn btn-secondary time-btn" data-range="365">最近1年</button>
                    </div>
                </div>

                <!-- 核心指标 -->
                <div class="card card-glow-blue animate-slide-up" style="animation-delay: 0.1s;">
                    <h4 style="margin: 0 0 16px 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px;">🎯 核心指标</h4>
                    <div class="stats-grid" style="margin: 0; grid-template-columns: repeat(2, 1fr);">
                        <div class="stat-card stat-blue">
                            <div class="stat-number">24</div>
                            <div class="stat-label">总任务数</div>
                            <div style="font-size: 10px; color: var(--accent-green); margin-top: 4px;">
                                <i class="fas fa-arrow-up"></i> +12%
                            </div>
                        </div>
                        <div class="stat-card stat-green">
                            <div class="stat-number">75%</div>
                            <div class="stat-label">完成率</div>
                            <div style="font-size: 10px; color: var(--accent-green); margin-top: 4px;">
                                <i class="fas fa-arrow-up"></i> +5%
                            </div>
                        </div>
                        <div class="stat-card stat-orange">
                            <div class="stat-number">3.2h</div>
                            <div class="stat-label">平均用时</div>
                            <div style="font-size: 10px; color: var(--accent-red); margin-top: 4px;">
                                <i class="fas fa-arrow-down"></i> -8%
                            </div>
                        </div>
                        <div class="stat-card stat-blue">
                            <div class="stat-number">92</div>
                            <div class="stat-label">效率分数</div>
                            <div style="font-size: 10px; color: var(--accent-green); margin-top: 4px;">
                                <i class="fas fa-arrow-up"></i> +3
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 任务完成趋势 -->
                <div class="card card-glow-green animate-slide-up" style="animation-delay: 0.2s;">
                    <h4 style="margin: 0 0 16px 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px;">📈 完成趋势</h4>
                    
                    <!-- 模拟图表 -->
                    <div style="height: 180px; background: var(--bg-primary); border-radius: var(--radius-md); border: var(--border-primary); padding: 16px; position: relative; overflow: hidden;">
                        <!-- 网格线 -->
                        <div style="position: absolute; top: 16px; left: 16px; right: 16px; bottom: 40px;">
                            <!-- Y轴标签 -->
                            <div style="position: absolute; left: -12px; top: 0; font-size: 10px; color: var(--text-tertiary);">10</div>
                            <div style="position: absolute; left: -12px; top: 25%; font-size: 10px; color: var(--text-tertiary);">8</div>
                            <div style="position: absolute; left: -12px; top: 50%; font-size: 10px; color: var(--text-tertiary);">6</div>
                            <div style="position: absolute; left: -12px; top: 75%; font-size: 10px; color: var(--text-tertiary);">4</div>
                            <div style="position: absolute; left: -12px; bottom: 0; font-size: 10px; color: var(--text-tertiary);">2</div>
                            
                            <!-- 水平网格线 -->
                            <div style="position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--bg-tertiary);"></div>
                            <div style="position: absolute; top: 25%; left: 0; right: 0; height: 1px; background: var(--bg-tertiary);"></div>
                            <div style="position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--bg-tertiary);"></div>
                            <div style="position: absolute; top: 75%; left: 0; right: 0; height: 1px; background: var(--bg-tertiary);"></div>
                            <div style="position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--bg-tertiary);"></div>
                            
                            <!-- 模拟折线图 -->
                            <svg width="100%" height="100%" style="position: absolute; top: 0; left: 0;">
                                <defs>
                                    <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                                        <stop offset="0%" style="stop-color:var(--accent-green);stop-opacity:1" />
                                        <stop offset="100%" style="stop-color:var(--accent-cyan);stop-opacity:1" />
                                    </linearGradient>
                                    <linearGradient id="areaGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                                        <stop offset="0%" style="stop-color:var(--accent-green);stop-opacity:0.3" />
                                        <stop offset="100%" style="stop-color:var(--accent-green);stop-opacity:0" />
                                    </linearGradient>
                                </defs>
                                <!-- 面积 -->
                                <path d="M 0 80 L 20 60 L 40 70 L 60 45 L 80 50 L 100 30 L 120 35 L 120 100 L 0 100 Z" 
                                      fill="url(#areaGradient)" opacity="0.6"/>
                                <!-- 线条 -->
                                <path d="M 0 80 L 20 60 L 40 70 L 60 45 L 80 50 L 100 30 L 120 35" 
                                      stroke="url(#lineGradient)" stroke-width="3" fill="none" 
                                      style="filter: drop-shadow(0 0 8px var(--accent-green-glow));"/>
                                <!-- 数据点 -->
                                <circle cx="0" cy="80" r="4" fill="var(--accent-green)" style="filter: drop-shadow(0 0 6px var(--accent-green-glow));"/>
                                <circle cx="20" cy="60" r="4" fill="var(--accent-green)" style="filter: drop-shadow(0 0 6px var(--accent-green-glow));"/>
                                <circle cx="40" cy="70" r="4" fill="var(--accent-green)" style="filter: drop-shadow(0 0 6px var(--accent-green-glow));"/>
                                <circle cx="60" cy="45" r="4" fill="var(--accent-green)" style="filter: drop-shadow(0 0 6px var(--accent-green-glow));"/>
                                <circle cx="80" cy="50" r="4" fill="var(--accent-green)" style="filter: drop-shadow(0 0 6px var(--accent-green-glow));"/>
                                <circle cx="100" cy="30" r="4" fill="var(--accent-green)" style="filter: drop-shadow(0 0 6px var(--accent-green-glow));"/>
                                <circle cx="120" cy="35" r="4" fill="var(--accent-green)" style="filter: drop-shadow(0 0 6px var(--accent-green-glow));"/>
                            </svg>
                        </div>
                        
                        <!-- X轴标签 -->
                        <div style="position: absolute; bottom: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; font-size: 10px; color: var(--text-tertiary);">
                            <span>周一</span>
                            <span>周二</span>
                            <span>周三</span>
                            <span>周四</span>
                            <span>周五</span>
                            <span>周六</span>
                            <span>周日</span>
                        </div>
                    </div>
                </div>

                <!-- 优先级分布 -->
                <div class="card card-glow-orange animate-slide-up" style="animation-delay: 0.3s;">
                    <h4 style="margin: 0 0 16px 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px;">🎯 优先级分布</h4>
                    
                    <div style="display: flex; gap: 16px; align-items: center;">
                        <!-- 饼图模拟 -->
                        <div style="width: 120px; height: 120px; position: relative;">
                            <div style="width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(
                                var(--accent-red) 0deg 144deg,
                                var(--accent-orange) 144deg 216deg,
                                var(--accent-green) 216deg 360deg
                            ); box-shadow: 0 0 30px rgba(255, 149, 0, 0.3);"></div>
                            <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: var(--bg-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; color: var(--text-primary);">100%</div>
                        </div>
                        
                        <!-- 图例 -->
                        <div style="flex: 1;">
                            <div style="display: flex; align-items: center; margin-bottom: 12px;">
                                <div style="width: 12px; height: 12px; background: var(--accent-red); border-radius: 2px; margin-right: 8px; box-shadow: 0 0 8px var(--accent-red-glow);"></div>
                                <span style="font-size: 14px; color: var(--text-primary); flex: 1;">高优先级</span>
                                <span style="font-size: 14px; font-weight: bold; color: var(--accent-red);">40%</span>
                            </div>
                            <div style="display: flex; align-items: center; margin-bottom: 12px;">
                                <div style="width: 12px; height: 12px; background: var(--accent-orange); border-radius: 2px; margin-right: 8px; box-shadow: 0 0 8px var(--accent-orange-glow);"></div>
                                <span style="font-size: 14px; color: var(--text-primary); flex: 1;">中优先级</span>
                                <span style="font-size: 14px; font-weight: bold; color: var(--accent-orange);">20%</span>
                            </div>
                            <div style="display: flex; align-items: center;">
                                <div style="width: 12px; height: 12px; background: var(--accent-green); border-radius: 2px; margin-right: 8px; box-shadow: 0 0 8px var(--accent-green-glow);"></div>
                                <span style="font-size: 14px; color: var(--text-primary); flex: 1;">低优先级</span>
                                <span style="font-size: 14px; font-weight: bold; color: var(--accent-green);">40%</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 分类统计 -->
                <div class="card animate-slide-up" style="animation-delay: 0.4s;">
                    <h4 style="margin: 0 0 16px 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px;">📋 分类统计</h4>
                    
                    <div style="display: flex; flex-direction: column; gap: 12px;">
                        <!-- 工作 -->
                        <div style="display: flex; align-items: center; gap: 12px;">
                            <div style="width: 24px; height: 24px; background: linear-gradient(45deg, var(--accent-blue), var(--accent-cyan)); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px;">
                                <i class="fas fa-briefcase"></i>
                            </div>
                            <span style="flex: 1; font-size: 14px;">工作</span>
                            <div style="flex: 2; height: 8px; background: var(--bg-tertiary); border-radius: 4px; overflow: hidden;">
                                <div style="width: 60%; height: 100%; background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan)); box-shadow: 0 0 10px var(--accent-blue-glow);"></div>
                            </div>
                            <span style="font-size: 12px; color: var(--accent-blue); font-weight: bold;">12</span>
                        </div>
                        
                        <!-- 个人 -->
                        <div style="display: flex; align-items: center; gap: 12px;">
                            <div style="width: 24px; height: 24px; background: linear-gradient(45deg, var(--accent-green), #32d74b); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px;">
                                <i class="fas fa-user"></i>
                            </div>
                            <span style="flex: 1; font-size: 14px;">个人</span>
                            <div style="flex: 2; height: 8px; background: var(--bg-tertiary); border-radius: 4px; overflow: hidden;">
                                <div style="width: 35%; height: 100%; background: linear-gradient(90deg, var(--accent-green), #32d74b); box-shadow: 0 0 10px var(--accent-green-glow);"></div>
                            </div>
                            <span style="font-size: 12px; color: var(--accent-green); font-weight: bold;">7</span>
                        </div>
                        
                        <!-- 学习 -->
                        <div style="display: flex; align-items: center; gap: 12px;">
                            <div style="width: 24px; height: 24px; background: linear-gradient(45deg, var(--accent-orange), #ffcc02); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px;">
                                <i class="fas fa-book"></i>
                            </div>
                            <span style="flex: 1; font-size: 14px;">学习</span>
                            <div style="flex: 2; height: 8px; background: var(--bg-tertiary); border-radius: 4px; overflow: hidden;">
                                <div style="width: 25%; height: 100%; background: linear-gradient(90deg, var(--accent-orange), #ffcc02); box-shadow: 0 0 10px var(--accent-orange-glow);"></div>
                            </div>
                            <span style="font-size: 12px; color: var(--accent-orange); font-weight: bold;">5</span>
                        </div>
                    </div>
                </div>

                <!-- 效率分析 -->
                <div class="card card-glow-cyan animate-slide-up" style="animation-delay: 0.5s;">
                    <h4 style="margin: 0 0 16px 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px;">⚡ 效率分析</h4>
                    
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
                        <div style="text-align: center; padding: 16px; background: var(--bg-primary); border-radius: var(--radius-md); border: 1px solid var(--accent-blue);">
                            <div style="font-size: 24px; font-weight: bold; color: var(--accent-blue); margin-bottom: 4px;">14:30</div>
                            <div style="font-size: 12px; color: var(--text-secondary);">最高效时段</div>
                        </div>
                        <div style="text-align: center; padding: 16px; background: var(--bg-primary); border-radius: var(--radius-md); border: 1px solid var(--accent-green);">
                            <div style="font-size: 24px; font-weight: bold; color: var(--accent-green); margin-bottom: 4px;">2.8天</div>
                            <div style="font-size: 12px; color: var(--text-secondary);">平均完成周期</div>
                        </div>
                        <div style="text-align: center; padding: 16px; background: var(--bg-primary); border-radius: var(--radius-md); border: 1px solid var(--accent-orange);">
                            <div style="font-size: 24px; font-weight: bold; color: var(--accent-orange); margin-bottom: 4px;">周三</div>
                            <div style="font-size: 12px; color: var(--text-secondary);">最活跃日期</div>
                        </div>
                        <div style="text-align: center; padding: 16px; background: var(--bg-primary); border-radius: var(--radius-md); border: 1px solid var(--accent-cyan);">
                            <div style="font-size: 24px; font-weight: bold; color: var(--accent-cyan); margin-bottom: 4px;">5连击</div>
                            <div style="font-size: 12px; color: var(--text-secondary);">最长连续完成</div>
                        </div>
                    </div>
                </div>

                <!-- 建议和洞察 -->
                <div class="card animate-slide-up" style="animation-delay: 0.6s;">
                    <h4 style="margin: 0 0 16px 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px;">💡 智能建议</h4>
                    
                    <div style="display: flex; flex-direction: column; gap: 12px;">
                        <div style="padding: 12px; background: var(--bg-primary); border-radius: var(--radius-md); border-left: 4px solid var(--accent-green);">
                            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 4px;">
                                <i class="fas fa-lightbulb" style="color: var(--accent-green);"></i>
                                <span style="font-size: 12px; font-weight: bold; color: var(--accent-green);">效率提升</span>
                            </div>
                            <p style="margin: 0; font-size: 12px; color: var(--text-secondary);">建议在14:30-16:30时段安排重要任务，这是您的高效时段。</p>
                        </div>
                        
                        <div style="padding: 12px; background: var(--bg-primary); border-radius: var(--radius-md); border-left: 4px solid var(--accent-orange);">
                            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 4px;">
                                <i class="fas fa-chart-line" style="color: var(--accent-orange);"></i>
                                <span style="font-size: 12px; font-weight: bold; color: var(--accent-orange);">趋势分析</span>
                            </div>
                            <p style="margin: 0; font-size: 12px; color: var(--text-secondary);">本周任务完成率比上周提升了5%，保持这个节奏！</p>
                        </div>
                        
                        <div style="padding: 12px; background: var(--bg-primary); border-radius: var(--radius-md); border-left: 4px solid var(--accent-blue);">
                            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 4px;">
                                <i class="fas fa-balance-scale" style="color: var(--accent-blue);"></i>
                                <span style="font-size: 12px; font-weight: bold; color: var(--accent-blue);">工作平衡</span>
                            </div>
                            <p style="margin: 0; font-size: 12px; color: var(--text-secondary);">工作类任务占比较高，建议增加一些个人发展类任务。</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 底部导航 -->
            <nav class="bottom-nav">
                <a href="#" class="nav-item">
                    <div class="nav-icon"><i class="fas fa-home"></i></div>
                    <div class="nav-label">主页</div>
                </a>
                <a href="#" class="nav-item">
                    <div class="nav-icon"><i class="fas fa-user"></i></div>
                    <div class="nav-label">我的</div>
                </a>
            </nav>
        </div>
    </div>

    <script>
        // 返回上一页
        function goBack() {
            console.log('返回上一页');
            showToast('返回上一页', 'info');
        }

        // 刷新数据
        function refreshData() {
            showToast('正在刷新数据...', 'info');
            
            // 模拟刷新动画
            const refreshBtn = document.querySelector('[onclick="refreshData()"] i');
            refreshBtn.style.animation = 'spin 1s linear';
            
            setTimeout(() => {
                refreshBtn.style.animation = '';
                showToast('数据已更新', 'success');
            }, 1000);
        }

        // 导出报告
        function exportReport() {
            showToast('正在生成报告...', 'info');
            
            setTimeout(() => {
                showToast('报告导出成功！', 'success');
            }, 1500);
        }

        // 时间范围选择
        document.querySelectorAll('.time-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                // 移除其他按钮的激活状态
                document.querySelectorAll('.time-btn').forEach(b => {
                    b.classList.remove('btn-primary', 'active');
                    b.classList.add('btn-secondary');
                });
                
                // 激活当前按钮
                this.classList.remove('btn-secondary');
                this.classList.add('btn-primary', 'active');
                
                const range = this.dataset.range;
                showToast(`已切换到最近${range}天的数据`, 'success');
                
                // 这里可以实现数据更新逻辑
                updateChartData(range);
            });
        });

        // 更新图表数据
        function updateChartData(range) {
            console.log('更新图表数据，时间范围:', range + '天');
            
            // 模拟数据更新动画
            const cards = document.querySelectorAll('.card');
            cards.forEach((card, index) => {
                setTimeout(() => {
                    card.style.transform = 'scale(0.98)';
                    setTimeout(() => {
                        card.style.transform = 'scale(1)';
                    }, 100);
                }, index * 50);
            });
        }

        // 显示提示消息
        function showToast(message, type = 'success') {
            const colors = {
                success: { bg: 'var(--accent-green)', glow: 'var(--accent-green-glow)' },
                danger: { bg: 'var(--accent-red)', glow: 'var(--accent-red-glow)' },
                info: { bg: 'var(--accent-blue)', glow: 'var(--accent-blue-glow)' }
            };
            
            const color = colors[type] || colors.success;
            
            const toast = document.createElement('div');
            toast.style.cssText = `
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: ${color.bg};
                color: white;
                padding: 12px 24px;
                border-radius: var(--radius-md);
                font-size: 14px;
                font-weight: 600;
                z-index: 10000;
                box-shadow: 0 0 30px ${color.glow};
                animation: fadeIn 0.3s ease;
            `;
            toast.textContent = message;
            
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.style.animation = 'fadeOut 0.3s ease';
                setTimeout(() => {
                    toast.remove();
                }, 300);
            }, 2000);
        }

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 添加统计卡片动画效果
            const statCards = document.querySelectorAll('.stat-card');
            statCards.forEach((card, index) => {
                setTimeout(() => {
                    card.style.transform = 'scale(1.05)';
                    setTimeout(() => {
                        card.style.transform = 'scale(1)';
                    }, 200);
                }, index * 100 + 500);
            });

            // 添加图表动画效果
            setTimeout(() => {
                const chartElements = document.querySelectorAll('svg path, svg circle');
                chartElements.forEach((element, index) => {
                    element.style.opacity = '0';
                    setTimeout(() => {
                        element.style.transition = 'opacity 0.5s ease';
                        element.style.opacity = '1';
                    }, index * 100);
                });
            }, 1000);
        });

        // 添加旋转动画
        const style = document.createElement('style');
        style.textContent = `
            @keyframes spin {
                from { transform: rotate(0deg); }
                to { transform: rotate(360deg); }
            }
            @keyframes fadeOut {
                from { opacity: 1; }
                to { opacity: 0; }
            }
        `;
        document.head.appendChild(style);
    </script>
</body>
</html> 